<template>
	<w-layout showNavbar navTitle="物流信息" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view style="position: relative;" class="public-card-11 fc px-5 py-40 mt-40">
					<view class="fr px-40">
						<view class="mr-30">
							<cut-corner :arrow="2" clipSize="25rpx">
								<image style="width: 150rpx;height: 150rpx;position: relative;" :src="(state.info.goods_info && state.info.goods_info.goods_image) || state.info.goodslist_imgurl" mode="widthFix"></image>
								<view class="px-10 py-2" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
									x{{(state.info.goods_info&&state.info.goods_info.goods_num) || state.info.count}}
								</view>
							</cut-corner>
						</view>
						<view class="">
							<view class="fs-32 color">
								物流状态：{{state.info.delivery_status}}
							</view>
							<view class="op-50 mt-15">
								{{state.info.delivery_name || state.info.courier_name}}
							</view>
							<view class="mt-15">
								<text class="op-50 mr-20">运单号</text>
								<text>{{state.info.delivery_no || state.info.courier_number}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="state.info.delivery_list && state.info.delivery_list.length" class="mt-60">
					<view class="progress-container">
						<view class="progress-item" v-for="(item,index) in state.info.delivery_list" :key="index">
							<view class="fr-ac">
								<view v-if="item.delivery_status" class="color mr-20">
									{{item.delivery_status}}
								</view>
								<view class="op-50">
									{{item.time}}
								</view>
							</view>
							<view class="op-50 mt-20">
								{{item.status}}
							</view>
							<image v-if="true" class="progress-item-after" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/point-fill-shadow.png" mode=""></image>
							<image v-else class="progress-item-after" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/point.png" mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		seckill_order_logistics,
		warehouse_order_logistics
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.type == 1){
			get_seckill_order_logistics(options.id)
		}else{
			get_warehouse_order_logistics(options.id)
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品订单',
			},
			{
				id:'',
				name:'商城订单',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
	}
	
	
	const level_tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'全部',
			},
			{
				id:'',
				name:'待发货',
			},
			{
				id:'',
				name:'待收货',
			},
			{
				id:'',
				name:'已完成',
			}
		]
	})
	function levelTabChange(e){
		level_tabs.current = e.index
		console.log(level_tabs.current)
	}
	
	const state = reactive({
		list:[1,1],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
		
		info: {},
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}

	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	async function get_seckill_order_logistics(id){
		const res = await seckill_order_logistics({
			id
		})
		state.info = res
	}
	async function get_warehouse_order_logistics(id){
		const res = await warehouse_order_logistics({
			id
		})
		state.info = res
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	
	.progress-container {
		box-sizing: border-box;
		padding-left: 60rpx;
	
		.progress-item {
			z-index: 99;
	
			$size: 25rpx;
			$gap: 80rpx;
			position: relative;
			width: 100%;
	
			margin-bottom: $gap;
	
			.progress-item-after{
				$dot-size: 18rpx;
				content: '';
				color: #fff;
				line-height: $dot-size;
				text-align: center;
					
				position: absolute;
				top: calc($size / 2 - 8rpx);
				left: calc(($size - 3rpx) / -0.5 - $dot-size / 2);
				// border-radius: 12rpx;
				z-index: 99;
			}
	
			&-title {
				font-weight: bold;
			}
	
			&-content {
				margin-top: $size;
				background: #ECF1F9;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				color: var(--gray-3);
			}
	
			// 方块背景
			&::after {
	// 			$dot-size: 18rpx;
	// 			content: '';
	// 			color: #fff;
	// 			line-height: $dot-size;
	// 			text-align: center;
	
	// 			position: absolute;
	// 			top: calc($size / 2);
	// 			left: calc(($size - 4rpx) / -0.5 - $dot-size / 2);
	// 			width: $dot-size;
	// 			height: $dot-size;
	// 			background-color: var(--color);
	// 			transform: rotate(45deg);
	// 			// border-radius: 12rpx;
	// 			z-index: 0;
			}
	
			// 线条
			&:not(:last-child)::before {
				content: '';
				position: absolute;
				bottom: calc($size / -2 - $gap);
				left: calc(($size - 4rpx) / -0.5);
				width: 4rpx;
				height: calc(100% + $gap);
				background-color: var(--gray-line);
			}
	
			.number {
				$dot-size: 50rpx;
	
				position: absolute;
				top: calc($size / 2);
				left: calc(($size - 4rpx) / -0.5 - $dot-size / 2);
				z-index: 9999;
	
				content: '';
				color: #fff;
				line-height: $dot-size;
				text-align: center;
	
				width: $dot-size;
				height: $dot-size;
				border-radius: 12rpx;
				z-index: 9;
			}
		}
	}
</style>